<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<script src="./jquery/jquery.2.2.4.js"></script>
<style>
    .log{
        width: 1200px;
        margin: 0 auto;

    }
    .aaa{
        width: 100%;
        margin: 0 auto;
        height: 500px;
        background-image: url("https://img.jslink.com/FILE86682ca9191b4ffea9ff51511810a90b.jpg");
    }
    .bbb{
        width: 1200px;
        margin: 0 auto;
    }
    .ccc{
        float: right;
        width: 300px;
        height: 400px;
        margin-top: 50px;
        background: #FFF;
        text-align: center;
    }
    input{
        height: 50px;
        width: 200px;
        border: solid 1px #ccc;
        margin: 10px 0 ;
    }
    .ccc p{
        display: inline-block;
    }
    .active{
        background: red;
    }
    .a2{
        display: none;
    }
</style>
<body>
    <div class="log">
        <img src="https://img.jslink.com/FILE10f88910e7964a4284b39e759a9603f6.jpg" alt="">

    </div>

    <div class="aaa">
        <div class="bbb" >
            <div class="ccc">
                
                <form action="#" method="post">
                    <p class="active">login</p>
                    <p>register</p>
                    <div class="a1">
                        <div class="login_inp_user">
                            <input id="login_id" type="text" name="username" placeholder="手机号" autocomplete="off">
                        </div>
                        <div class="login_inp_pass">
                            <input id="password" type="password" placeholder="密码" autocomplete="off">
                        </div>
                        <div class="login_options">
                            <input type="button" value="立即登录" id="submit">
                        </div>
                    </div>
                    <div class="a2">
                        <div>
                            <input id="tel" type="text" name="phonr_number" placeholder="您的手机号码">
                        </div>
                        <div class="set_password">
                            <input id="password1" type="password" name="password" placeholder="您的密码">
                        </div>
                        <div class="controls_box">
                            <input type="button" value="立即注册" id="submit1">
                        </div>
                    </div>

                </form>
            </div>
        </div>

    </div>
                            
                            <div id="fff"></div>
                            <script>
                                $("#fff").load("http://localhost:3000/public.html .fff")
                            </script>
</body>

<script>
    $(".ccc").on("click","p",function(){
        console.log($(".ccc").find("p")[0])
        if($(".ccc").find("p")[0]==this){this.className="active";$(".ccc").find("p")[1].className="";
        $(".a1")[0].style.display="block";$(".a2")[0].style.display="none";
    }
        if($(".ccc").find("p")[1]==this){this.className="active";$(".ccc").find("p")[0].className="";
        $(".a2")[0].style.display="block";$(".a1")[0].style.display="none";

    }
    $("#submit1").click(function(){
        console.log($("#password1").val())
        // 收集用户输入的信息，通过ajax发往后端，等待返回信息
        $.ajax({
            url:"http://localhost:3000/api",
            data:{
                type:"register",
                username:$("#tel").val(),
                password:$("#password1").val()
            },
            success:res=>{
                // 解析后端返回的信息，判断注册成功或是失败
                res = JSON.parse(res)
                console.log(res);
                if(res.code === 1){
                    alert("注册成功")
                    // 注册成功的处理
                    // if(confirm("注册成功，是否跳转到登录")){
                        // location.assign("./login.html")
                        // location.href = "./login.html";
                    // }
                }else if(res.code === 0){
                    // 注册失败的处理
                    alert(res.title + "，注册失败");
                }
            }
        })
    })
        
    })
    $("#submit").click(function(){
        // 收集用户输入的信息，通过ajax发往后端，等待返回信息
        $.ajax({
            url:"http://localhost:3000/api",
            data:{
                type:"login",
                username:$("#login_id").val(),
                password:$("#password").val()
            },
            success:res=>{
                // 解析后端返回的信息，判断登录成功或是失败
                res = JSON.parse(res);
                console.log(res);
                // 成功
                if(res.code === 1){
                    // 登录成功后，存储登录信息，以便登录守卫
                    localStorage.setItem("isLogin", "ok");
                    localStorage.setItem("username", res.data);
                    if(confirm("登录成功是否跳转到首页")){
                        location.href = "./index.html"
                    }
                }else if(res.code === 0){
                    if(confirm(res.title + "，登录失败，是否跳转到注册")){
                        location.href = "./register.html"
                    }
                }else if(res.code === 2){
                    // 失败
                    alert(res.title + "，登录失败")
                }
            }
        })
    })
</script>
</html>